<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'; // 引入 echarts 库
import HomePage from '../apis/HomePage.js'; // 引入 API

// 定义 ref 引用的 chart 容器
const chart = ref(null);

// 定义初始的图表配置（option）
const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999',
      },
    },
  },
  legend: {
    data: ['已完成任务数量', '已发布任务数量', '任务完成率'], // 图例数据，后续动态更新
  },
  xAxis: [
    {
      type: 'category',
      data: [], // X轴数据，后续动态更新
      axisPointer: {
        type: 'shadow',
      },
      axisLabel: {
        interval: 0, // 显示所有的下标
        rotate: 45, // 调整文字角度，避免重叠
        align: 'center', // 文本居中对齐
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '任务数量',
      min: 0,
      max: 200,
      interval: 50,
      axisLabel: {
        formatter: '{value} 个',
      },
    },
    {
      type: 'value',
      name: '任务完成率',
      min: 0,
      max: 100,
      interval: 25,
      axisLabel: {
        formatter: '{value} %',
      },
    },
  ],
  series: [
    {
      name: '已完成任务数量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 个';
        },
      },
      data: [], // 数据
    },
    {
      name: '已发布任务数量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '个';
        },
      },
      data: [], // 数据
    },
    {
      name: '任务完成率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        },
      },
      data: [], // 数据
    },
  ],
  // 添加 dataZoom 配置，实现缩放功能
  dataZoom: [
    {
      type: 'inside', // 鼠标滚轮缩放
      xAxisIndex: [0], // 只对 x 轴进行缩放
    },
  ],
});

// 在组件挂载时获取并处理数据
onMounted(async () => {
  try {
    // 1. 异步请求数据
    const response = await HomePage.getHomePageMap(); // 使用 await 等待异步返回
    const data = JSON.parse(response); // 假设返回的 data 已经是 JavaScript 对象

    // 2. 更新图表配置数据
    if (data) {
      // 更新 X 轴数据
      option.value.xAxis[0].data = data.xAxis;

      // 更新 series 数据
      const accout = [];
      for (let i = 0; i < data.seriesData[0].data.length; i++) {
        if (data.seriesData[0].data[i] === 0) {
          accout[i] = 0;
        } else {
          accout[i] =
            (data.seriesData[0].data[i] / data.seriesData[1].data[i]) * 100;
        }
      }
      option.value.series[0].data = data.seriesData[0].data;
      option.value.series[1].data = data.seriesData[1].data;
      option.value.series[2].data = accout;

      // 3. 初始化并渲染图表
      const myChart = echarts.init(chart.value);
      myChart.setOption(option.value); // 设置图表选项
    }
  } catch (error) {
    console.error('获取数据失败', error);
  }
});
</script>

<template>
  <div ref="chart" style="width: 100%; height: 400px"></div>
  <!-- 显示图表的容器 -->
</template>

<style scoped lang="less">
/* 可以根据需要进行样式调整 */
</style>
